<template>
	<view class="container" :style="{backgroundImage:`url(${distribution_config.bg}) `}">
		<view class="inner">
			<view class="line"></view>
			<!-- <image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/fx-logo.png" mode="widthFix"
				class="fx-logo"></image> -->
			<!-- <view class="fx-center" v-if="user!=''">
				<view v-if="user.realname" class="row">{{user.realname}}</view>
				<view class="row tit">邀请您成为农场主</view>
				<view class="row">电话:{{user.mobile}}</view>
				<view class="row">ID:{{user.user_id}}</view>
			</view> -->
			<image :src="img_url" mode="widthFix" class="qrcode-img"
				:style="{top:distribution_config.qrcode_top+'rpx',left:distribution_config.qrcode_left+'rpx',width:distribution_config.qrcode_size+'rpx',height:distribution_config.qrcode_size+'rpx'}">
			</image>
			<view class="fx-bot" v-if="user!=''">
				<!-- #ifdef APP-PLUS -->
				<view class="fx-btn" @click="fenxiang">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/weixin.png"
						mode="widthFix"></image>
					<text>分享</text>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<button @click="onShare" class="fx-btn">
					<!-- 	<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/weixin.png"
						mode="widthFix"></image> -->
					<text>分享</text>
				</button>
			</view>
			<!-- #endif -->
		</view>
		<u-popup :show="show" @close="show=false" mode="bottom" :overlayOpacity="0.6">
			<view class="share-container">
				<!-- #ifdef APP-PLUS -->
				<view class="item" @click="share(1)">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/fxpyq.png" class="fx-img"
						mode="widthFix"></image>
					<view class="title">分享朋友圈</view>
				</view>
				<view class="item" @click="share(2)">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/fxwxq.png" class="fx-img"
						mode="widthFix"></image>
					<view class="title">分享微信</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="item" open-type="share">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/index/fxwxq.png" class="fx-img"
						mode="widthFix"></image>
					<view class="title">分享好友</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<button class="item" open-type="share">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/douyin.png" class="fx-img"
						mode="widthFix"></image>
					<view class="title">分享好友</view>
				</button>
				<!-- #endif -->
				<view @click="onSave" class="item">

					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/save.png" class="fx-img"
						mode="widthFix">
					</image>
					<view class="title">保存</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		saveImage,
		isWeiXin
	} from '@/common/helper.js'
	import {
		baseUrl,
		platform
	} from '../../config/config';
	var _this;
	export default {
		data() {
			return {
				show: false,
				user: '',
				img_url: '',
				share_img: '',
				distribution_config: {
					bg: 'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/fx-bg.png',
					qrcode_size: 300,
					qrcode_left: 225,
					qrcode_top: 480
				}
			}
		},
		onLoad() {
			this.officialConfig()
		},
		onShow() {
			_this = this
			this.get_user_rcode()
		},
		methods: {
			onShare() {
				// #ifdef H5
				if (isWeiXin()) {
					uni.showToast({
						title: "请点击右上角分享",
						icon: "none"
					})
					this.show = true
				}
				// #endif
				// #ifndef H5
				this.show = true
				// #endif
			},
			onSave() {
				//#ifdef H5
				uni.showToast({
					title: '长按图片以保存！'
				})
				//#endif

				//#ifdef MP
				uni.showLoading({
					title: '保存中...'
				})
				uni.getImageInfo({
					src: this.img_url,
					success: (res) => {
						saveImage(res.path)
						uni.hideLoading()
						this.show = false
					}
				})
				//#endif
			},
			//获取用户信息
			async get_user_rcode() {
				// post请求
				const data = await _this.$post('api/Qrcode')
				if (data.code == 200) {
					this.user = data.data.user
					// #ifdef APP-PLUS || H5
					this.img_url = data.data.img
					// #endif
					// #ifdef MP-WEIXIN || MP-TOUTIAO
					this.img_url = baseUrl + `/api/qr?platform=${platform}&path=pages/auth/mobile-login&scene=reid:` +
						this.user_id
					// #endif
					this.share_img = data.data.share_img


					if (data.data.distribution_config) {
						this.distribution_config = {
							bg: baseUrl + data.data.distribution_config.bg,
							qrcode_size: data.data.distribution_config.qrcode_size * 2,
							qrcode_left: data.data.distribution_config.qrcode_left * 2,
							qrcode_top: data.data.distribution_config.qrcode_top * 2,
						}

						console.info(this.distribution_config)
					}
				} else {
					this.$u.toast(data.msg)
					setTimeout(() => {
						// this.centerto();
					}, 2000)
				}
			},
			fenxiang() {
				_this.show = true
			},
			share(type) {
				// #ifdef APP-PLUS
				if (type == 1) {
					//分享到朋友圈
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 2,
						imageUrl: _this.share_img,
						success(res) {
							console.log("success:" + JSON.stringify(res));
							_this.$u.toast('分享成功')
							_this.sign(3)
						},
						fail(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					//分享到聊天界面
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						href: "http://uniapp.dcloud.io/",
						title: "uni-app分享",
						summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
						imageUrl: _this.share_img,
						success(res) {
							console.log("success:" + JSON.stringify(res));
							_this.$u.toast('分享成功')
							_this.sign(4)
						},
						fail(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
				// #endif

				// #ifdef MP
				uni.showToast({
					title: '请点击右上角操作',
					icon: "none"
				})
				this.show = false
				// #endif
			},
			async sign(type) {
				let params = {
					type
				}
				const data = await _this.$post('api/user_qd', params)
				if (data.code == 200) {} else {}
			},
			//跳转回上一页
			centerto() {
				this.$u.route({
					type: "back"
				})
			}
		},
		onShareAppMessage() {
			return {
				path: `/pages/auth/mobile-login?reid=${this.user.user_id}`,
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background-size: 100% 100%;
		position: relative;
		height: 100%;
		box-sizing: border-box;

		.line {
			height: 140rpx;
		}

		.fx-logo {
			width: 80%;
			display: block;
			margin: 0 auto;
		}

		.fx-center {
			margin-top: 40rpx;

			.row {
				text-align: center;
				color: #000;
				font-size: 30rpx;
				line-height: 60rpx;
			}

			.tit {
				font-size: 40rpx;
			}
		}

		.qrcode-img {
			position: absolute;
		}


		.fx-bot {
			position: absolute;
			left: 0;
			bottom: 60rpx;
			width: 100%;
			margin-top: 40rpx;
			@include flex-box(column, space-between, center);


			.fx-btn {
				background: #fff;
				height: 56rpx;
				width: 220rpx;
				border-radius: 40rpx;
				@include flex-box(row, center, center);
				margin-top: 30rpx;

				image {
					width: 36rpx;
					margin-right: 10rpx;
				}

				text {
					font-weight: 500;
				}
			}
		}
	}
</style>